<template>
  <div>
    <el-select class="province" v-model="valProvince" placeholder="请选择省" :disabled="disabled||proData.length==0?true:false" @change="selProvince" filterable clearable style="width:98px">
      <el-option value="">请选择省</el-option>
      <el-option v-for="item in proData" :value="item.id" :label="item.name" :key="item.id"></el-option>
    </el-select>
    <el-select class="city" v-model="valCity" placeholder="请选择市" :disabled="disabled||cityData.length==0?true:false" @change="selCity" filterable clearable style="width:98px">
      <el-option value="">请选择市</el-option>
      <el-option v-for="item in cityData" :value="item.id" :label="item.name" :key="item.id"></el-option>
    </el-select>
    <el-select class="area" v-model="valArea" placeholder="请选择区" :disabled="disabled||areaData.length==0?true:false" @change="selArea" filterable clearable
      style="width:98px">
      <el-option value="">请选择区</el-option>
      <el-option v-for="item in areaData" :value="item.id" :label="item.name" :key="item.id"></el-option>
    </el-select>
  </div>
</template>
<script>
import { get_district } from '@/api/region/region';
export default {
  props: {
    disabled:{
      type: Boolean,
      default: false
    },
    updateData: {
      type: Object,
      default: function() {
        return {
          prov: '',
          city: '',
          area: ''
        };
      }
    },
    getName: {
      type: Boolean,
      default: false
    },
    isClear: {
      type: Boolean,
      default: false
    },
    prov: {
      type: [String, Number],
      default: ''
    },
    city: {
      type: [String, Number],
      default: ''
    },
    area: {
      type: [String, Number],
      default: ''
    }
  },
  data() {
    return {
      // options,
      valProvince: '',
      valCity: '',
      valArea: '',
      proData: [
        { id: '1', name: '北京' },
        { id: '2', name: '天津' },
        { id: '3', name: '上海' },
        { id: '4', name: '重庆' },
        { id: '5', name: '河北' },
        { id: '6', name: '山西' },
        { id: '7', name: '内蒙古' },
        { id: '8', name: '辽宁' },
        { id: '9', name: '吉林' },
        { id: '10', name: '黑龙江' },
        { id: '11', name: '江苏' },
        { id: '12', name: '浙江' },
        { id: '13', name: '安徽' },
        { id: '14', name: '福建' },
        { id: '15', name: '江西' },
        { id: '16', name: '山东' },
        { id: '17', name: '河南' },
        { id: '18', name: '湖北' },
        { id: '19', name: '湖南' },
        { id: '20', name: '广东' },
        { id: '21', name: '广西' },
        { id: '22', name: '海南' },
        { id: '23', name: '四川' },
        { id: '24', name: '贵州' },
        { id: '25', name: '云南' },
        { id: '26', name: '西藏' },
        { id: '27', name: '陕西' },
        { id: '28', name: '甘肃' },
        { id: '29', name: '青海' },
        { id: '30', name: '宁夏' },
        { id: '31', name: '新疆' },
        { id: '32', name: '台湾' },
        { id: '33', name: '香港' },
        { id: '34', name: '澳门' },
        { id: '35', name: '海外' }
      ],
      cityData: [],
      areaData: []
    };
  },
  activated() {
    if (this.prov) {
      this.setDefault();
    }
  },
  watch: {
    isClear: function() {
      if (this.isClear) {
        this.reset();
      }
    },
    updateData: function() {
      this.cityData = [];
      this.areaData = [];
      this.valProvince = this.updateData.prov;
      if (this.updateData.prov) {
        get_district({ id: this.updateData.prov }).then(response => {
          this.cityData = response;
          this.valCity = this.updateData.city;
          if (this.updateData.city) {
            get_district({ id: this.updateData.city }).then(response => {
              this.areaData = response;
              if (this.updateData.area == 0) this.valArea = '';
              else this.valArea = this.updateData.area;
            });
          } else {
            this.valArea = '';
          }
        });
      } else {
        this.valCity = '';
        this.valArea = '';
      }
    }
  },
  methods: {
    setDefault() {
      this.valProvince = this.prov;
      get_district({ id: this.valProvince }).then(response => {
        this.cityData = response;
        this.valCity = this.city;
        get_district({ id: this.valCity }).then(response => {
          this.areaData = response;
          this.valArea = this.area == 0?'':this.area;
        });
      });
    },
    reset() {
      this.valProvince = '';
      this.valCity = '';
      this.valArea = '';
    },
    selProvince() {
      this.valCity = '';
      this.valArea = '';
      this.cityData = [];
      this.areaData = [];
      let provName = this.getDistrictName(this.valProvince, this.proData);
      if (this.getName) {
        this.$emit('provVal', this.valProvince, provName);
        this.$emit('cityVal', this.valCity, '');
        this.$emit('areaVal', this.valArea, '');
      } else {
        this.$emit('provVal', this.valProvince);
        this.$emit('cityVal', this.valCity);
        this.$emit('areaVal', this.valArea);
      }
      if (this.valProvince == '') {
        return;
      }
      if (this.valProvince)
        get_district({ id: this.valProvince }).then(response => {
          this.cityData = response;
        });
    },
    selCity() {
      this.valArea = '';
      this.areaData = [];
      let cityName = this.getDistrictName(this.valCity, this.cityData);
      if (this.getName) {
        this.$emit('cityVal', this.valCity, cityName);
      } else {
        this.$emit('cityVal', this.valCity);
      }
      if (this.valCity)
        get_district({ id: this.valCity }).then(response => {
          this.areaData = response;
        });
    },
    selArea() {
      let areaName = this.getDistrictName(this.valArea, this.areaData);
      if (this.getName) {
        this.$emit('areaVal', this.valArea, areaName);
      } else {
        this.$emit('areaVal', this.valArea);
      }
    },
    getDistrictName(id, data) {
      if (!id || id == 0 || data.length <= 0) {
        return '';
      }
      return data.filter(val => val.id == id)[0].name;
    }
  }
};
</script>

<style scoped>
  .city{
    margin: 0 2px;
  }
</style>